<html>
  <head>
    <link rel="stylesheet" href="/static/css/cupertino/jquery-ui-1.8.20.custom.css" type="text/css" media="all" />
    <link rel="stylesheet" href="/static/css/jquery.multiselect.css" type="text/css" media="all" />
    <link rel="stylesheet" href="/static/css/jquery.multiselect.filter.css" type="text/css" media="all" />
    <script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.ui.datepicker-sk.js"></script>    
    <script type="text/javascript" src="/static/js/jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.multiselect.js"></script>
    <script type="text/javascript" src="/static/js/jquery.multiselect.filter.js"></script>
    <script type="text/javascript" src="/static/js/jquery.form.js"></script>
    <script type="text/javascript" src="/static/js/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/static/js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/static/js/jquery.tooltip.js"></script>
    <script type="text/javascript" src="/static/js/jquery.validate.js"></script>        
    <script type="text/javascript">
      // TODO move to an external javascript
      $(document).ready(function(){
        $("#company_location").multiselect({
         checkAllText: "Všetky", 
         uncheckAllText: "Žiadne",
         noneSelectedText: "Výber mesta",
         selectedText: function(numChecked, numTotal, checkedItems){
           var selectedText = "";
           for (var i = 0; i < checkedItems.length; i++) {
             if (i < 4) {
               selectedText += checkedItems[i].title + "<br>";
             } else { 
               selectedText += "...";
               break;
             }
           } 
           return selectedText;
         },
         minWidth: 500, maxWidth: 600, height: 250         
        }).multiselectfilter({placeholder:"klúč. slovo"});
        
        $.datepicker.setDefaults($.datepicker.regional["sk"]);        
        $("#from_date").datepicker({minDate: -{{ min_date_delta }}, maxDate: -1, defaultDate: -2});                                        
        $("#to_date").datepicker({minDate: -{{ min_date_delta }}, maxDate: -1, defaultDate: -1});
        
        $("#company_type").multiselect({
         checkAllText: "Všetky", 
         uncheckAllText: "Žiadne",
         noneSelectedText: "Výber právnej formy",         
         selectedText: function(numChecked, numTotal, checkedItems){           
           var selectedText = "";
           for (var i = 0; i < checkedItems.length; i++) {
             if (i < 4) {
               selectedText += checkedItems[i].title + "<br>";
             } else { 
               selectedText += "...";
               break;
             }
           } 
           return selectedText;
         },
         minWidth: 500, maxWidth: 600         
        });                
        
        $("#business_type").multiselect({         
         checkAllText: "Všetky", 
         uncheckAllText: "Žiadne",
         noneSelectedText: "Výber predmetu podnikania",         
         selectedText: function(numChecked, numTotal, checkedItems){           
           var selectedText = "";
           for (var i = 0; i < checkedItems.length; i++) {
             if (i < 4) {
               selectedText += checkedItems[i].title + "<br>";
             } else { 
               selectedText += "...";
               break;
             }
           } 
           return selectedText;
         },
         minWidth: 500, maxWidth: 600, height: 300         
        }).multiselectfilter({placeholder:"klúč. slovo"});
                
        
        $( "input:submit").button(); 

        // validation methods        
        $.validator.addMethod("optionRequired", function(value, element) {
            return $(element).multiselect("getChecked").length > 0;
        });
        
        $.validator.addMethod("validFromDate", function(value, element) {
            return $(element).datepicker("getDate") <= $("#to_date").datepicker("getDate");
        });

        $.validator.addMethod("validToDate", function(value, element) {
            return $(element).datepicker("getDate") >= $("#from_date").datepicker("getDate");
        });

        
	    // JDR: our form submit and valiation
	    var search_form = $("#search_form").validate({
	        
	        // JDR: make sure we show/hide both blocks
	        errorContainer: "#errorblock-div1, #errorblock-div2",
	        
	        // JDR: put all error messages in a UL
	        errorLabelContainer: "#errorblock-div2 ul",
	        
	        // JDR: wrap all error messages in an LI tag
	        wrapper: "li",
	        
	        // JDR: rules/messages are for the validation
	        rules: {
                company_location: "optionRequired",
                from_date: "validFromDate",
                to_date: "validToDate",
                company_type: "optionRequired",
                business_type: "optionRequired"                             	        
	        },
	        messages: {
	            company_location: "Vyberte aspon jedno mesto.",
	            from_date: "Počiatočný dátum nesmie byť väčší ako konečný.",
	            to_date: "Konečný dátum nesmie byť menší ako počiatočný.",
	            company_type: "Vyberte aspoň jednu právnu formu.",
	            business_type: "Vyberte aspoň jeden predmet podnikania.",
	        },
	        ignore: ':hidden:not("#city_list") :hidden:not("#company_type_list") :hidden:not("#from_date") :hidden:not("#to_date") :hidden:not("#business_type_list")',
	        // JDR: our form submit
	        submitHandler: function(form) {
	            jQuery(form).ajaxSubmit({
	                // JDR: the return target block
	                target: '#client-script-return-data',
	                
	                // JDR: what to do on form submit success
	                success: function() { $('#my-modal-form').dialog('close'); successEvents('#client-script-return-msg'); }
	             });
	         }
	    }); 
                      
      });
            
      function getObjectList(url) {
        $('#client-script-return-data').load(url);
        // REVISIT (pd): the tooltip is not working
        $('#company_list *').tooltip();
      }
      
      function getCompanyDetails(id) {
        //$('#client-script-return-data').load('/company/' + id + '/');
        
        var dialog = $("<div class='flora'></div>").insertAfter('#client-script-return-data');  
            $(dialog).load("/company/" + id + "/", function() {  
              $(dialog).dialog({
                title: 'Informácie o firme',                   
                resizable: true,  
                modal: true,  
                width: 400,  
                height: 450  
              });  
              $('.ui-dialog-titlebar-close').click(function() {  
                $('client-script-return-data').remove(dialog);              
              })  
            });                         
      }
            
    </script>    
  </head>
  
  <body>
  
    <!-- JDR: our return message block -->
    <div class="ui-widget ui-helper-hidden" id="client-script-return-msg">
        <div class="ui-state-highlight ui-corner-all" style="padding: 0pt 0.7em; margin-top: 20px;"> 
            <p><span class="ui-icon ui-icon-circle-check" style="float: left; margin-right: 0.3em;"></span>
            <!-- JDR: our return message will go in the following span -->
            <span id="client-script-return-msg-rtn"></span></p>
        </div>
    </div>
         
    <!-- JDR: form validation error container -->
    <div class="ui-widget ui-helper-hidden" id="errorblock-div1">
        <div class="ui-state-error ui-corner-all" style="padding: 0pt 0.7em;" id="errorblock-div2" style="display:none;"> 
            <p>
               <!-- JDR: fancy icon -->
               <span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span> 
               <strong>Alert:</strong> Errors detected!
            </p>
            <!-- JDR: validation plugin will target this UL for error messages -->
            <ul></ul>
        </div>
    </div>
  
    <form id="search_form" name="search_form" action="get_company_list" method="GET">{% csrf_token %}
      <fieldset>
	    <p><label for="company_location">Sídlo firmy:</label> 
	    <select id="company_location" name="company_location" multiple="multiple">
           {% for city in city_list %}
             <option value="{{ city.id }}" selected="selected">{{ city.name }}</option>
           {% endfor %}
	    </select>
	    </p>

        <p><label for="or_entry_date">Dátum zápisu firmy do Obch. registra:</label><input id="from_date" name="from_date" value="{{ default_from_date }}" type="text"> - 
	        <input id="to_date" name="to_date" type="text" value="{{ default_to_date }}">
	    </p>
	    
	    <p><label for="company_type">Právna forma:</label> 
	    <select id="company_type" name="company_type" multiple="multiple">
          {% for company_type in company_type_list %}
            <option value="{{ company_type.id }}" selected="selected">{{ company_type.type }}</option>
          {% endfor %}
	    </select>
	    </p>
	   
	    <p><label for="business_type">Predmet podnikania:</label> 
	    <select id="business_type" name="business_type" multiple="multiple">
	      {% for business in business_list %}
	        <option value="{{ business.id }}">{{ business.business }}</option>
	      {% endfor %}
	    </select>
	    </p>	    
	    <input value="Hladaj" type="submit">
	  </fieldset>
    </form>
    
    <!-- JDR: our return target block -->
    <div id="client-script-return-data" class="ui-widget ui-widget-content jdr-blockme"></div>
  
  </body>
</html>